<template>
    <div class="app-container" id="nbprint">
      <el-row>
        <el-button type="primary" v-print="printOption">打印</el-button>
        <div>
          <el-divider content-position="left">基础信息</el-divider>
        </div>
        <el-form ref="elForm" :model="orderList" :rules="rules" size="medium" label-width="120px">
          <el-col :span="8">
            <el-form-item label="订单编号:" prop="orderNo">
              {{orderList.orderNo}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单日期:" prop="createTime">
              {{orderList.createTime}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单类型:" prop="orderType">
              {{orderList.orderType == 'GENERAL' ? '普通订单' : '活动订单'}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务类型:" prop="orderType">
              {{orderList.orderMethod=='REAL_TIME'?'自提':(orderList.orderMethod=='RESERVE'?'预约':(orderList.orderMethod=='VISIT_SERVER'?'上门服务':'外卖'))}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单会员:" prop="deliveryName">
              {{orderList.deliveryName}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单渠道:" prop="orderChannel">
              {{orderList.orderChannel == '1' ? '微信小程序' : (orderList.orderChannel == '2' ? 'IOS' : 'ANDROID')}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态:" prop="orderStatus">
              <span>{{orderList.orderStatus == 'PENDING_ORDER' ? '待接单' : (orderList.orderStatus == 'WAITING_DELIVERY' ? '待配送' : (orderList.orderStatus == 'DELIVERY_PROGRESS' ? '配送中' : (orderList.orderStatus == 'PENDING_EXPENSES' ? '待消费' : (orderList.orderStatus == 'WAITING_COMMENT' ? '待评价' : (orderList.orderStatus == 'TRANSACTION_CLOSED' ? '关闭-取消' : (orderList.orderStatus == 'TRANSACTION_COMPLETED' ? '交易成功':(orderList.orderStatus == 'WAITING_PAY' ? '待支付' :(orderList.orderStatus == 'PAY_FAILED' ? '支付失败':(orderList.orderStatus =='IN_STOCK'?'备货中':'售后中')))))))))}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付方式:" prop="payType">
              {{orderList.payType == 'ALIPAY' ? '支付宝' :(orderList.payType == 'WECHAT' ? '微信' :(orderList.payType == 'BALANCE' ? '余额' :'电子卡'))}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品数量:" prop="productUnit">
              {{orderList.productUnit}}个
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总金额:" prop="totalAmount">
              ￥{{orderList.totalAmount}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="优惠券抵扣金额:" prop="couponAmount">
              ￥{{orderList.couponAmount}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="积分抵扣金额:" prop="integrationAmount">
              ￥{{orderList.integrationAmount}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运费:" prop="deliveryAmount">
              ￥{{orderList.deliveryAmount}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会员折扣:" prop="userLevelAmount">
              ￥{{orderList.userLevelAmount}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总优惠:" prop="payAmount">
              <span >￥{{orderList.offerAmount}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实付金额:" prop="payAmount">
              <span class="paid">￥{{orderList.payAmount}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <div>
          <el-divider content-position="left">商品</el-divider>
        </div>
        <el-table v-loading="loading" :data="productList" table-layout="auto" :border="true">
          <el-table-column label="商品名称" prop="productName" align="center" />
          <el-table-column label="实付金额" prop="actualAmount" align="center" />
          <el-table-column label="商品数量" prop="productUnit" align="center" />
          <el-table-column label="规格" align="center" prop="productSkuDesc" />
          <el-table-column label="单价" align="center" prop="productUnitPrice" />
          <el-table-column label="商品金额" prop="productAmount" align="center" />
          <el-table-column label="商品图片" prop="productImageUrl" align="center">
            <template slot-scope="scope">
              <el-popover placement="right" trigger="hover">
                <img :src="`${imgHost}` +scope.row.productImageUrl" alt="" style="width: 150px;height: 100px">
                <img slot="reference" :src="`${imgHost}` + scope.row.productImageUrl" style="height: 40px;width: 60px">
              </el-popover>
            </template>
          </el-table-column>
          
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </el-row>
      <el-row v-if="orderList.invoicesInfoEntity">
        <div>
          <el-divider content-position="left">发票信息</el-divider>
        </div>
        <el-form ref="elForm" :model="invoiceInfo" :rules="rules" size="medium" label-width="100px">
          <el-col :span="8">
            <el-form-item label="发票类型:" prop="invoiceType">
              {{invoiceInfo.invoiceType == 'PERSONAL' ? '个人' : '企业'}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发票抬头:" prop="invoiceTitle">
              {{invoiceInfo.invoiceTitle}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收件邮箱:" prop="emailAddress">
              {{invoiceInfo.emailAddress}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="税号:" prop="taxCode">
              {{invoiceInfo.taxCode}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开票状态:" prop="status">
              {{invoiceInfo.status == 'INVOICING' ? '开票中' : '已开票'}}
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="invoiceInfo.status == 'INVOICED'">
            <el-form-item label="发票:" prop="invoiceContent">
              <el-image style="width: 100px; height: 100px" :src="`${imgHost}` + invoiceInfo.invoiceContent" :preview-src-list="srcList">
              </el-image>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
  
      <el-row v-if="orderList.orderMethod=='DELIVERY' ||  orderList.orderMethod=='VISIT_SERVER'">
        <div>
          <el-divider content-position="left">收货人信息（商家服务）</el-divider>
        </div>
        <el-form ref="elForm" :model="orderList" :rules="rules" size="medium" label-width="100px">
          <el-col :span="4">
            <el-form-item label="姓名:" prop="deliveryName">
              {{orderList.deliveryName}}
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="联系电话:" prop="deliveryContactNo">
              {{orderList.deliveryContactNo}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址:" prop="deliveryStreet">
              {{orderList.deliveryStreet}}
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="预约人数:" prop="reserveNo">
              {{orderList.reserveNo}}个
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约时间:" prop="reserveTime">
              {{orderList.reserveTime}}
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
  
      <el-row v-if="orderList.orderMethod=='DELIVERY' ||  orderList.orderMethod=='VISIT_SERVER'">
        <div>
          <el-divider content-position="left">{{orderList.orderMethod=='DELIVERY'?'配送人信息':'上门服务人信息'}}</el-divider>
        </div>
        <el-form ref="elForm" :model="orderList" :rules="rules" size="medium" label-width="100px">
          <el-col :span="4">
            <el-form-item label="姓名:" prop="shopperName">
              {{orderList.shopperName}}
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="联系电话:" prop="shopperPhone">
              {{orderList.shopperPhone}}
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <div>
          <el-divider content-position="left">买家备注</el-divider>
        </div>
        <el-form ref="elForm" :model="orderList" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24">
            <el-form-item label="备注:" prop="memo">
              {{orderList.memo}}
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </template>
  <script>
  
    import {
      getDetails,
    } from "@/api/cm-merchant/cm-order";
  
    export default {
      name: 'OrderList',
      components: {},
      props: [],
      data() {
        return {
          orderList: {
            product: []
          },
          formData: {
            dictValue: undefined,
          },
          rules: {},
          queryParams: {
            pageNum: 1,
            pageSize: 10,
          },
          total: 0,
          productList: [],
          orderType: '',
          scrabbleList: [],
          invoiceInfo:{},
          srcList:[],
          printOption: {
            id: 'nbprint', // 打印元素的id 不需要携带#号
            popTitle: '', // 页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
            extraCss: "", // 打印可引入外部的一个 css 文件
            extraHead: "", // 打印头部文字
          }
        }
      },
      computed: {},
      watch: {},
      created() {
        // this.getDictType()
        this.getList()
        this.orderType = this.$route.query.orderType
      },
      mounted() {},
      methods: {
        /** 查询列表 */
        getList() {
          this.loading = true;
          getDetails(this.$route.query.id).then(response => {
            this.orderList = response.data;
            this.printOption.popTitle=this.orderList.orderNo;
            this.productList = response.data.orderProductEntityList;
            if(response.data.groupInitiationEntity){
              this.scrabbleList = response.data.groupInitiationEntity.groupUserEntityList
            }
            if(response.data.invoicesInfoEntity){
              this.invoiceInfo = response.data.invoicesInfoEntity
              this.srcList.push(this.imgHost + response.data.invoicesInfoEntity.invoiceContent)
            }
            // this.total = response.total;
            this.loading = false;
          });
        },
        resetForm() {
          this.$refs['elForm'].resetFields()
        },
      }
    }
  </script>
  <style scoped>
    .el-row {
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
      &:last-child {
        margin-bottom: 0;
      }
    }
  
    .paid {
      color: #ed3f14;
      font-size: 25px;
    }
    .grounpNum{
      color: #ed3f14;
      font-size: 18px;
      padding: 0 5px;
    }
  </style>
  